<template>
    <el-dialog
        v-model="componentUpdateDialogVisible"
        :title="title"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="componentForm" :rules="componentRules" ref="componentFormRef">
                <el-form-item label="组件名称-英文" label-width="20%" prop="componentName">
                    <el-input v-model="componentForm.componentName" placeholder="组件名称-英文" clearable />
                </el-form-item>
                <el-form-item label="组件名称-中文" label-width="20%" prop="componentCnName">
                    <el-input v-model="componentForm.componentCnName" placeholder="组件名称-中文" clearable />
                </el-form-item>
                <el-form-item label="组件内容" label-width="20%" prop="componentTemplate">
                    <el-input type="textarea" v-model="componentForm.componentTemplate" placeholder="组件内容" clearable :autosize="{minRows: 10, maxRows: 10 }"/>
                </el-form-item>
                <el-form-item label="组件数据" label-width="20%" prop="componentData">
                    <el-input type="textarea" v-model="componentForm.componentData" placeholder="组件数据" clearable :autosize="{minRows: 10, maxRows: 10 }"/>
                </el-form-item>
                <el-form-item label="计算属性" label-width="20%" prop="componentComputed">
                    <el-input type="textarea" v-model="componentForm.componentComputed" placeholder="计算属性" clearable :autosize="{minRows: 10, maxRows: 10 }"/>
                </el-form-item>
                <el-form-item label="组件参数" label-width="20%" prop="componentJson">
                    <el-input type="textarea" v-model="componentForm.componentJson" placeholder="组件参数" clearable :autosize="{minRows: 10, maxRows: 10 }"/>
                </el-form-item>
                <el-form-item label="组件类型" label-width="20%" prop="componentType">
                    <el-select v-model="componentForm.componentType" clearable placeholder="组件类型" style="width: 100%">
                        <el-option value="ICON" label="图标组件"></el-option>
                        <el-option value="COMMON" label="通用组件"></el-option>
                        <el-option value="CUSTOM" label="自定义组件"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog(componentFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script name="ComponentUpdateDialog" setup lang="ts">
import {componentInfoCreate, componentInfoQueryNoContent, componentInfoUpdate} from "@/request/components";
import {ElNotification, FormInstance} from "element-plus";
import {computed, defineProps, ref} from "vue";
import {useComponentManageStore} from "@/stores/lowcode/componentManage";

let props = defineProps(['title', 'componentForm']);

let title = computed(() => {return props['title']});
let componentForm = computed(() => {return props['componentForm']});

let componentRules = ref({
    componentName: [{ required: true, message: '组件名称-英文不能为空', trigger: 'blur' }],
    componentCnName: [{ required: true, message: '组件名称-中文不能为空', trigger: 'blur' }],
    componentType: [{ required: true, message: '组件类型不能为空', trigger: 'blur' }]
});
let saveLoading = ref(false);

let componentUpdateDialogVisible = computed(() => {return useComponentManageStore().updateDialogVisible});
let componentSearchData = computed(() => {return useComponentManageStore().componentSearchData});

function cancelDialog() {
    useComponentManageStore().resetUpdateDialogVisible(false);
}

function refreshData() {
    componentInfoQueryNoContent(componentSearchData.value).then(res => {
        useComponentManageStore().resetComponentDataList(res.data);
    })
}

let componentFormRef = ref<FormInstance>()
function submitDialog(formEl: FormInstance | undefined) {
    if (!formEl) return;
    saveLoading.value = true;
    formEl.validate((valid) => {
        if (valid) {
            if (componentForm.value.id === "") {
                // 添加组件
                componentInfoCreate(componentForm.value).then(res => {
                    ElNotification({
                        title: 'Success',
                        message: res["message"],
                        type: 'success'
                    });
                    refreshData();
                    useComponentManageStore().resetUpdateDialogVisible(false);
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            } else {
                // 修改组件
                componentInfoUpdate(componentForm.value).then(res => {
                    ElNotification({
                        title: 'Success',
                        message: res["message"],
                        type: 'success'
                    });
                    refreshData();
                    useComponentManageStore().resetUpdateDialogVisible(false);
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            }
        }
    })
}
</script>

<style scoped lang="less">
.formContainer {
    .selectIconsClass {
        width: 20px;
    }
}
</style>